<template>
  <i class="iconfont icon-zuojiantou_huaban cursor-left" @click="ShortSideBar" ref="cursorLeft"></i>
  <i class="iconfont icon-zuojiantou_huaban-copy cursor-right" @click="lengthSideBar" ref="cursorRight"></i>
  <div class="sideBar" ref="sideBar">
    <div class="title">
      <i class="iconfont icon-icon-class-c fontC"></i>
      <span v-text="title"></span>
    </div>
    <ul class="routerEnter">
      <router-link to="/home" class="routeList2">
        <div class="route" ref="drawModify">
          <i class="iconfont icon-xiugaidingdan"></i>
          <span class="chara">主页</span>
          <!-- <i class="iconfont icon-shangjiantou fontT" ref="arrowUp2"></i>
          <i class="iconfont icon-xiajiantou fontT" ref="arrowDown2"></i> -->
        </div>
      </router-link>
      <router-link to="/course" class="routeList1">
        <div class="route" ref="drawSearch">
          <i class="iconfont icon-chaxun"></i>
          <span class="chara">课程管理</span>
          <!-- <i class="iconfont icon-shangjiantou fontT" ref="arrowUp1"></i>
          <i class="iconfont icon-xiajiantou fontT" ref="arrowDown1"></i> -->
        </div>
      </router-link>

      <router-link to="/users" class="routeList2">
        <div class="route" ref="drawModify">
          <span class="chara">用户管理</span>
          <!-- <i class="iconfont icon-shangjiantou fontT" ref="arrowUp2"></i>
          <i class="iconfont icon-xiajiantou fontT" ref="arrowDown2"></i> -->
        </div>
      </router-link>
      <router-link to="/labs" class="routeList2">
        <div class="route" ref="drawModify">
          <span class="chara">实验室管理</span>
        </div>
      </router-link>
      <router-link to="/sessions" class="routeList2">
        <div class="route" ref="drawModify">
          <span class="chara">学期管理</span>
        </div>
      </router-link>
      <router-link to="/messages" class="routeList2">
        <div class="route">
          <span class="chara">消息管理</span>
        </div>
      </router-link>
      <router-link to="/demands" class="routeList2">
        <div class="route" ref="drawModify">
          <span class="chara"> 需求统计</span>
        </div>
      </router-link>
      <router-link to="/statistics" class="routeList2">
        <div class="route" ref="drawModify">
          <span class="chara">课程统计</span>
        </div>
      </router-link>
      <router-link to="/course" class="routeList1 Mesaage" style="height: 250px;">
        <div class="route" ref="drawSearch" style="height: 250px;">
          <i class="iconfont icon-xiaoxi"></i>
          <ul class="chara">
            <li v-for="i in 4" class="MessageItem" :key="i">消息{{ i }}</li>
          </ul>
          <!-- <i class="iconfont icon-shangjiantou fontT" ref="arrowUp1"></i>
          <i class="iconfont icon-xiajiantou fontT" ref="arrowDown1"></i> -->
        </div>
      </router-link>
    </ul>

    <div class="information">
      <i class="iconfont icon-a-ziyuan90 avatar"></i>
      <div class="teacher">
        <span class="name">{{ useStore.curLoginUser.userName}}</span>
        <span class="phonenumber">{{ useStore.curLoginUser.phone }}</span>
      </div>
      <i class="iconfont icon-tuichu" @click="logout"></i>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useUserStore } from '@/store/user'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { removeToken } from '@/utils/auth'
const useStore = useUserStore()

let title = ref("教师选课系统");
const sideBar = ref();
const cursorLeft = ref();
const cursorRight = ref();
// const arrowUp1 = ref();
// const arrowUp2 = ref();
// const arrowDown1 = ref();
// const arrowDown2 = ref();
// const searchList = ref();
// const modifyList = ref();
const drawModify = ref();
const drawSearch = ref();
const modifyStyle = ref(["modifyList"]);
const searchStyle = ref(["searchList"]);
onMounted(() => {
  cursorRight.value.style.display = "none";
  //   arrowUp1.value.style.display = "none";
  //   arrowUp2.value.style.display = "none";
  //   searchList.value.style.height = "0px";
  //   modifyList.value.style.height = "0px";
  //   drawModify.value.addEventListener("click", drawerModify);
  //   drawSearch.value.addEventListener("click", drawerSearch);
});

// const drawerSearch = () => {
//   searchList.value.style.height =
//     searchList.value.style.height === "100px" ? "0" : "100px";
// };

// const drawerModify = () => {
//   modifyList.value.style.height =
//     modifyList.value.style.height === "100px" ? "0" : "100px";
// };
const ShortSideBar = () => {
  sideBar.value.style.width = "60px";
  cursorLeft.value.style.display = "none";
  //   drawModify.value.removeEventListener("click", drawerModify);
  //   drawSearch.value.removeEventListener("click", drawerSearch);
  //   searchList.value.style.height = "100px";
  //   modifyList.value.style.height = "100px";
  //   modifyStyle.value = ["modifyListclose"];
  //   searchStyle.value = ["searchListclose"];
  setTimeout(() => {
    cursorRight.value.style.display = "";
  }, 200);
};
const lengthSideBar = () => {
  sideBar.value.style.width = "220px";
  cursorRight.value.style.display = "none";
  //   drawModify.value.addEventListener("click", drawerModify);
  //   drawSearch.value.addEventListener("click", drawerSearch);
  //   searchList.value.style.height = "0px";
  //   modifyList.value.style.height = "0px";
  //   modifyStyle.value = ["modifyList"];
  //   searchStyle.value = ["searchList"];
  setTimeout(() => {
    cursorLeft.value.style.display = "";
  }, 200);
};
const router = useRouter()
const logout = () => {
  ElMessageBox.confirm(
    '退出登录吗？',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then((v) => {
    if (v === 'confirm') {
      console.log('logout')
      // userApi.logout()
      removeToken()
      router.push({ path: '/login' })
    }
  })

}
</script>

<style lang="less" scoped>
.sideBar {
  left: 0;
  top: 0;
  width: 220px;
  height: 100vh;
  background-color: #08479b;
  border-radius: 10px;
  position: relative;
  white-space: nowrap;
  transition: all 0.2s;
  padding: 0;
  position: relative;

  .title {
    font-size: 24px;
    padding: 10px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid black;
    overflow: hidden;

    .fontC {
      width: 10px;
      height: 10px;
      padding: 7px;
      margin: 5px;
    }
  }

  .routerEnter {
    padding-left: 0;
    margin-left: 0;
    margin-top: 20px;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;

    .routeList {
      padding: 0;
      margin: 0;
      // background-color: #fff;
    }

    .item {
      padding-top: 15px;
      padding-bottom: 10px;
      // border: 1px solid black;
      // padding-left: 85px;
      cursor: pointer;
      font-size: 16px;
      text-decoration: none;
      color: #fff;
      display: block;
    }

    .searchList {
      list-style: none;
      // border: 1px solid black;
      width: 100%;
      text-align: left;
      padding-left: 85px;
      // padding-left: 85px;
      margin-left: 0;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.5s ease;
    }

    .modifyList {
      list-style: none;
      width: 100%;
      // height: 100px;
      text-align: left;
      padding-left: 85px;
      margin-left: 0;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.5s ease;
    }

    .close:hover {
      opacity: 1;
    }

    .route {
      display: inline-block;
      text-decoration: none;
      width: 100%;
      height: 20px;
      padding: 10px 0 10px 0;
      // padding-left: 0;
      // margin: 10px;
      margin: 10px 0 10px 0;
      position: relative;
      letter-spacing: nowrap;
      line-height: 20px;
      overflow: hidden;
      cursor: pointer;

      /* background-color: #FFF; */
      i {
        position: absolute;
        left: 0;
        padding: 5px;
        margin: 10px;
        transform: translateY(-15px);
      }

      .chara {
        position: absolute;
        /* margin-left: -30px; */
        font-size: 16px;
        left: 0;
        padding-left: 80px;
        // overflow: hidden;
        color: white;
      }

      .fontT {
        width: 10px;
        height: 10px;
        left: 60%;
      }
    }

    .route:hover {
      background-color: #000;
    }
  }

  .information {
    left: 0;
    bottom: 0;
    position: absolute;
    /* padding: 10px; */
    display: flex;
    width: 100%;
    height: 70px;
    overflow: hidden;

    .avatar {
      padding: 10px;
      margin: 10px;
      transform: translateY(-20px);
    }

    .teacher {
      display: flex;
      justify-content: center;
      flex-direction: column;
      margin-left: 10px;

      .name {
        font-size: 16px;
        color: white
      }

      .phonenumber {
        font-size: 12px;
        color: white
      }
    }

    i {
      line-height: 70px;
      margin-left: 10px;
    }
  }
}

.cursor-left {
  width: 30px;
  height: 30px;
  line-height: 30px;
  position: absolute;
  left: calc(220px - 13px);
  top: 10%;
  background-color: #fff;
  border-radius: 50%;
  z-index: 99;
  cursor: pointer;
}

.cursor-right {
  width: 30px;
  height: 30px;
  line-height: 30px;
  position: absolute;
  left: calc(60px - 13px);
  top: 10%;
  background-color: #fff;
  border-radius: 50%;
  z-index: 99;
  cursor: pointer;
}

.searchListclose {
  position: absolute;
  left: 100%;
  transform: translateY(18%);
  background-color: #1d2a3b;
  list-style: none;
  height: 100px;
  color: #fff;
  text-align: left;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 9999;
}

.modifyListclose {
  position: absolute;
  left: 100%;
  transform: translateY(58%);
  background-color: #1d2a3b;
  list-style: none;
  height: 100px;
  color: #fff;
  text-align: left;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 9999;
}

.item:hover~.close {
  opacity: 1;
  padding: 10px;
}

.routeList1:hover~.searchListclose {
  // background-color: #000;
  // top: 0;
  display: block;
  height: 100px;
  opacity: 1;
  padding: 10px;
  transition: all 0.5s ease;
  top: 10%;
}

.routeList2:hover~.modifyListclose {
  // background-color: #000;
  // top: 0;
  display: block;
  height: 100px;
  opacity: 1;
  padding: 10px;
  transition: all 0.5s ease;
  transform: translateY();
}

.Mesaage {
  height: 300px;
}

.MessageItem {
  list-style: none;
  // width: 60%;
  height: 20px;
  color: white;
  font-size: 12px;
  // margin-left: 0;
  text-align: left;
  // border: 1px solid black;
  transform: translateX(50%);
}
</style>
